<template>
  <div class="dashboard page-container">
    <h2 class="text-2xl font-bold mb-6">首页</h2>
    
    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
      <el-card shadow="hover" class="stat-card">
        <div class="flex items-center justify-between">
          <div>
            <div class="text-gray-500 text-sm mb-1">车辆总数</div>
            <div class="text-2xl font-bold">12</div>
          </div>
          <el-icon class="text-4xl text-blue-500">
            <Van />
          </el-icon>
        </div>
      </el-card>
      
      <el-card shadow="hover" class="stat-card">
        <div class="flex items-center justify-between">
          <div>
            <div class="text-gray-500 text-sm mb-1">在用车辆数</div>
            <div class="text-2xl font-bold">8</div>
          </div>
          <el-icon class="text-4xl text-green-500">
            <CaretRight />
          </el-icon>
        </div>
      </el-card>
      
      <el-card shadow="hover" class="stat-card">
        <div class="flex items-center justify-between">
          <div>
            <div class="text-gray-500 text-sm mb-1">本月油费消费</div>
            <div class="text-2xl font-bold">¥8,560</div>
            <div class="text-xs text-green-500">
              <span>较上月</span>
              <span class="ml-1">↓12%</span>
            </div>
          </div>
          <el-icon class="text-4xl text-orange-500">
            <Tickets />
          </el-icon>
        </div>
      </el-card>
      
      <el-card shadow="hover" class="stat-card">
        <div class="flex items-center justify-between">
          <div>
            <div class="text-gray-500 text-sm mb-1">本月ETC消费</div>
            <div class="text-2xl font-bold">¥1,320</div>
            <div class="text-xs text-red-500">
              <span>较上月</span>
              <span class="ml-1">↑8%</span>
            </div>
          </div>
          <el-icon class="text-4xl text-purple-500">
            <CreditCard />
          </el-icon>
        </div>
      </el-card>
    </div>
    
    <!-- 车辆状态概览 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
      <el-card shadow="hover" class="status-card">
        <template #header>
          <div class="font-medium">车辆状态概览</div>
        </template>
        <div class="flex items-center justify-around py-3">
          <div class="text-center">
            <div class="text-xl font-bold text-green-500">7</div>
            <div class="text-sm text-gray-500">正常运行</div>
          </div>
          <div class="text-center">
            <div class="text-xl font-bold text-red-500">2</div>
            <div class="text-sm text-gray-500">维修中</div>
          </div>
          <div class="text-center">
            <div class="text-xl font-bold text-blue-500">75%</div>
            <div class="text-sm text-gray-500">今日出车率</div>
          </div>
        </div>
      </el-card>
      
      <el-card shadow="hover" class="status-card">
        <template #header>
          <div class="font-medium">里程统计</div>
        </template>
        <div class="flex items-center justify-around py-3">
          <div class="text-center">
            <div class="text-xl font-bold text-blue-500">4,280</div>
            <div class="text-sm text-gray-500">本月总里程</div>
          </div>
          <div class="text-center">
            <div class="text-xl font-bold text-green-500">356</div>
            <div class="text-sm text-gray-500">平均每车里程</div>
          </div>
          <div class="text-center">
            <div class="text-xl font-bold text-orange-500">3</div>
            <div class="text-sm text-gray-500">需保养车辆</div>
          </div>
        </div>
      </el-card>
      
      <el-card shadow="hover" class="status-card">
        <template #header>
          <div class="font-medium">今日安排</div>
        </template>
        <div class="flex items-center justify-around py-3">
          <div class="text-center">
            <div class="text-xl font-bold text-green-500">3</div>
            <div class="text-sm text-gray-500">今日出车</div>
          </div>
          <div class="text-center">
            <div class="text-xl font-bold text-orange-500">1</div>
            <div class="text-sm text-gray-500">待处理违章</div>
          </div>
          <div class="text-center">
            <div class="text-xl font-bold text-blue-500">2</div>
            <div class="text-sm text-gray-500">今日归还</div>
          </div>
        </div>
      </el-card>
    </div>
    
    <!-- 图表和列表 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
      <!-- 车辆使用趋势图表 -->
      <el-card shadow="hover" class="chart-card">
        <template #header>
          <div class="font-medium">车辆使用趋势</div>
        </template>
        <div class="chart-container" ref="usageChartRef"></div>
      </el-card>
      
      <!-- 月度费用图表 -->
      <el-card shadow="hover" class="chart-card">
        <template #header>
          <div class="font-medium">月度费用统计</div>
        </template>
        <div class="chart-container" ref="costChartRef"></div>
      </el-card>
    </div>
    
    <!-- 数据列表区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 待处理违章 -->
      <el-card shadow="hover" class="list-card">
        <template #header>
          <div class="flex items-center justify-between">
            <span class="font-medium">待处理违章</span>
            <el-link type="primary" :underline="false" href="#/traffic/violation">
              查看全部
            </el-link>
          </div>
        </template>
        <div class="list-content">
          <el-empty v-if="!violations.length" description="暂无待处理违章" />
          <div v-else v-for="(item, index) in violations" :key="index" class="list-item">
            <div class="flex justify-between mb-1">
              <span class="font-medium">{{ item.plateNumber }}</span>
              <span class="text-red-500">罚款: ¥{{ item.fine }}</span>
            </div>
            <div class="flex justify-between text-sm text-gray-500">
              <span>{{ item.location }}</span>
              <span>{{ item.date }}</span>
            </div>
          </div>
        </div>
      </el-card>
      
      <!-- 即将到期保养 -->
      <el-card shadow="hover" class="list-card">
        <template #header>
          <div class="flex items-center justify-between">
            <span class="font-medium">即将到期保养</span>
            <el-link type="primary" :underline="false" href="#/maintenance/service">
              查看全部
            </el-link>
          </div>
        </template>
        <div class="list-content">
          <el-empty v-if="!maintenance.length" description="暂无即将到期保养" />
          <div v-else v-for="(item, index) in maintenance" :key="index" class="list-item">
            <div class="flex justify-between mb-1">
              <span class="font-medium">{{ item.plateNumber }}</span>
              <span class="text-orange-500">剩余: {{ item.remaining }}公里</span>
            </div>
            <div class="flex justify-between text-sm text-gray-500">
              <span>{{ item.type }}</span>
              <span>预计时间: {{ item.date }}</span>
            </div>
          </div>
        </div>
      </el-card>
      
      <!-- 近期出车记录 -->
      <el-card shadow="hover" class="list-card">
        <template #header>
          <div class="flex items-center justify-between">
            <span class="font-medium">近期出车记录</span>
            <el-link type="primary" :underline="false" href="#/usage/vehicle">
              查看全部
            </el-link>
          </div>
        </template>
        <div class="list-content">
          <el-empty v-if="!usageRecords.length" description="暂无出车记录" />
          <div v-else v-for="(item, index) in usageRecords" :key="index" class="list-item">
            <div class="flex justify-between mb-1">
              <span class="font-medium">{{ item.plateNumber }}</span>
              <span :class="item.status === '进行中' ? 'text-green-500' : 'text-gray-500'">
                {{ item.status }}
              </span>
            </div>
            <div class="flex justify-between text-sm text-gray-500">
              <span>{{ item.driver }}</span>
              <span>{{ item.startTime }}</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { Van, CaretRight, Tickets, CreditCard } from '@element-plus/icons-vue'

export default {
  name: 'Dashboard',
  components: {
    Van,
    CaretRight,
    Tickets,
    CreditCard
  },
  setup() {
    // 图表引用
    const usageChartRef = ref(null)
    const costChartRef = ref(null)
    
    // 模拟数据
    const violations = ref([
      {
        plateNumber: '京A12345',
        fine: 200,
        location: '北京市海淀区',
        date: '2023-04-28'
      },
      {
        plateNumber: '京B54321',
        fine: 150,
        location: '北京市朝阳区',
        date: '2023-04-26'
      }
    ])
    
    const maintenance = ref([
      {
        plateNumber: '京A12345',
        remaining: 320,
        type: '常规保养',
        date: '2023-05-15'
      },
      {
        plateNumber: '京C78901',
        remaining: 450,
        type: '常规保养',
        date: '2023-05-20'
      }
    ])
    
    const usageRecords = ref([
      {
        plateNumber: '京A12345',
        driver: '张三',
        startTime: '2023-04-28 09:30',
        status: '进行中'
      },
      {
        plateNumber: '京B54321',
        driver: '李四',
        startTime: '2023-04-27 14:15',
        status: '已完成'
      }
    ])
    
    // 初始化图表
    onMounted(() => {
      // 车辆使用趋势图表
      const usageChart = echarts.init(usageChartRef.value)
      const usageOption = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['出车次数', '行驶里程']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: [
          {
            type: 'value',
            name: '出车次数',
            position: 'left'
          },
          {
            type: 'value',
            name: '里程(km)',
            position: 'right'
          }
        ],
        series: [
          {
            name: '出车次数',
            type: 'line',
            data: [10, 12, 15, 14, 18, 16]
          },
          {
            name: '行驶里程',
            type: 'line',
            yAxisIndex: 1,
            data: [1200, 1400, 1800, 1600, 2200, 1900]
          }
        ]
      }
      usageChart.setOption(usageOption)
      
      // 月度费用图表
      const costChart = echarts.init(costChartRef.value)
      const costOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['油费', 'ETC费用', '违章费用']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: {
          type: 'value',
          name: '金额(元)'
        },
        series: [
          {
            name: '油费',
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data: [6000, 7200, 8500, 7800, 8600, 8000]
          },
          {
            name: 'ETC费用',
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data: [1200, 1500, 1400, 1300, 1500, 1300]
          },
          {
            name: '违章费用',
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data: [0, 300, 0, 200, 0, 150]
          }
        ]
      }
      costChart.setOption(costOption)
      
      // 窗口大小变化时重绘图表
      window.addEventListener('resize', () => {
        usageChart.resize()
        costChart.resize()
      })
    })
    
    return {
      usageChartRef,
      costChartRef,
      violations,
      maintenance,
      usageRecords
    }
  }
}
</script>

<style scoped>
.page-container {
  padding: 20px;
}

.page-title {
  position: relative;
  margin-bottom: 4px;
}

.page-title::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 40px;
  height: 3px;
  background-color: var(--el-color-primary);
  border-radius: 3px;
}

/* 统计卡片样式 */
.stat-card {
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  height: 100%;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* 状态卡片样式 */
.status-card {
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
}

.status-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* 图表卡片样式 */
.chart-card {
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
}

.chart-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.chart-container {
  height: 300px;
  width: 100%;
}

/* 列表卡片样式 */
.list-card {
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
}

.list-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.list-content {
  height: 250px;
  overflow-y: auto;
}

.list-item {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s;
}

.list-item:hover {
  background-color: var(--el-color-primary-light-9);
  transform: translateX(5px);
}

.list-item:last-child {
  border-bottom: none;
}

/* 图标样式 */
:deep(.el-icon) {
  transition: all 0.3s;
}

.stat-card:hover :deep(.el-icon) {
  transform: scale(1.2);
}

/* 卡片标题样式 */
:deep(.el-card__header) {
  padding: 15px 20px;
  font-weight: bold;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* 链接样式 */
:deep(.el-link) {
  transition: all 0.3s;
}

:deep(.el-link:hover) {
  transform: translateY(-2px);
}

/* 暗黑模式适配 */
:deep(.dark-theme .list-item) {
  border-bottom-color: #2c2c2c;
}

:deep(.dark-theme .list-item:hover) {
  background-color: #2a2a2a;
}

:deep(.dark-theme .el-card__header) {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* 滚动条样式 */
.list-content::-webkit-scrollbar {
  width: 6px;
}

.list-content::-webkit-scrollbar-thumb {
  background-color: #dcdfe6;
  border-radius: 3px;
}

.list-content::-webkit-scrollbar-track {
  background-color: #f5f7fa;
}

:deep(.dark-theme .list-content::-webkit-scrollbar-thumb) {
  background-color: #4c4d4f;
}

:deep(.dark-theme .list-content::-webkit-scrollbar-track) {
  background-color: #2c2d2f;
}
</style> 